<template>
	<view class="container">
		<!-- <view class="title">
			<view class="title-text">完成</view>
			<view class="logo"  @click="chooseAvatar">
				<view class="u-avatar-wrap">
					<image class="u-avatar-demo"  :src="avatar" mode="aspectFill"></image>
				</view>
				<view  @tap="chooseAvatar" class="logo-text">点击更换店铺头像</view>
			</view>
		</view> -->
		<nav-bars class="nav_bar navBarApp" :titleCenter="false" backState="2000" bgColor="transparent" fontColor="#fff">
			<view class="nav_center">
				<view class="title-text" @click="handleAccomplish">完成</view>
			</view>
		</nav-bars>	
		
		<view class="title">
			<!-- <view class="title-text" @click="handleAccomplish">完成</view> -->
			<u-top-tips ref="uTips"></u-top-tips>
			<view class="logo">
				<!-- <image :src="`${baseimg}/static/home-personal/logo.jpg`" class="logo-img" mode=""></image> -->
				<u-avatar :src="logoImg.path" mode="circle" size="large" @click="handleAvatar(1)"></u-avatar>		
				<view class="logo-text">点击更换头像</view>
			</view>
		</view>
		<view class="content">
			<view class="detail">
				<view class="name">
					<text>店铺名称</text>
					<view class="name-input">
						<input type="text" v-model="storeList.store_name" placeholder="点击填写" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>店铺背景</text>
					<view class="name-input" @click="handleAvatar(2)">
						<image :src="backImg.path" mode="" class="logo-bg"></image>
						<text class="iconfont icon-jinru"></text>
					</view>						
				</view>
				<view class="name">
					<text>联系人</text>
					<view class="name-input">
						<input type="text" v-model="storeList.link_name" placeholder="点击填写" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>店铺地址</text>
					<view class="name-input" @click="selectAddress">
						<view class="store-address">
							{{address_end==''?'点击进入设置':address_end}}
						</view>
						<!-- <input type="text"   placeholder="点击进入设置" disabled="true" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/> -->
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>店铺电话</text>
					<view class="name-input">
						<input type="text" v-model="storeList.mobile" value="" placeholder="点击填写" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/>						
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>开业年份</text>
					<view class="name-input" @click="selectYear('year')">
						<input type="text" v-model="storeList.open_time" value=""  placeholder="点击选择" disabled="true" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/>						
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>营业时间</text>
					<view class="name-input select_time">
						<input type="text" @click="selectTime_start('start')" v-model="storeList.business_start" value=""  placeholder="开始时间" disabled="true" placeholder-style="font-size:24rpx;text-align:center;color:#D8D8D8"/>						
						至
						<input type="text" @click="selectTime_end('end')" v-model="storeList.business_end"  value=""  placeholder="结束时间" disabled="true" placeholder-style="font-size:24rpx;text-align:center;color:#D8D8D8"/>
						<!-- <text class="iconfont icon-jinru"></text> -->
					</view>					
				</view>
				<view class="name">
					<text>是否支持配送</text>
					<view class="name-input">
						<picker mode="selector" :range="range" @change="handlePicker">
							<view >{{selectValue}}</view>
						</picker>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>店铺小程序码</text>
					<view class="name-input" @tap="handleImage">
						<view class="">
							<!-- 点击上传 -->
							点击进入
						</view>
						<!-- <input type="text" value="" placeholder="点击上传" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/> -->
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				
				<view class="name">
					<text>店铺标签</text>
					<view class="name-input" @click="upTag">
						<view class="">
							<!-- 点击上传 -->
							<view v-if="!tagList.length">点击选择</view>
							<view class="" v-else>
								<u-tag :text="item.cate_name" size="mini" v-for="(item,index) in tagList" :key="index" shape="circle" type="info" closeable @close.stop="closeTag(index)"/>
							</view>
						</view>
						<!-- <input type="text" value="" placeholder="点击上传" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/> -->
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>店铺简介</text>
					<text style="color: #D8D8D8;">{{num}}/100</text>
				</view>
				<view class="textarea">
				     <textarea @input="handleTextarea" v-model="storeList.store_detail" placeholder-style="color:#D8D8D8" placeholder="填写简介让别人快速了解您的店铺~"/>
				</view>
			</view> 
			<!-- 时间 -->
			<u-picker mode="time" v-model="timeShow" @confirm="pickDate" :params="params"></u-picker>
			
			<!-- 标签 -->
			<u-picker mode="selector" v-model="tagShow" :range="cateList" @confirm="selectCate" range-key="cate_name"></u-picker>
		</view>
	</view>
</template>
<script>
	import URL from '@/config/url.js'
	// import citySelect from '@/components/u-city-select/u-city-select.vue';
	export default {
		props:{
			address_end:{
				type:String,
				default:''
			},
			allArea:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				range:['是','否'],
				selectValue:'点击选择',
				storeList:{},
				num:0,
				timeShow:false,
				// addressShow:false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				areaCode:[],
				// list:{},
				logoImg:{},
				backImg:{},
				type:'',
				addressEnd:'',
				all_area:{},
				cateList:[], //类目列表
				tagList:[], //已选择的标签
				tagShow:false,
				avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
			}
		},
		created() {
			this.getShopIndex()
			this.getCate()
			console.log(this.$props,'kfjhglkjsdfhglsj')
			// // 监听从裁剪页发布的事件，获得裁剪结果
			// uni.$on('uAvatarCropper', path => {
			// 	this.avatar = path;
			// 	// 可以在此上传到服务端
			// 	uni.uploadFile({
			// 		url: 'http://www.example.com/upload',
			// 		filePath: path,
			// 		name: 'file',
			// 		complete: (res) => {
			// 			console.log(res);
			// 		}
			// 	});
			// })
		},
		methods:{
			// 获取主页信息
			getShopIndex(){
				let sid = this.$store.state.index.sid
				let params = {
					store_id:sid
				}
				this.$api.store_storeDetail(params).then(res=>{
					console.log(res,'主页信息')
					if(res.code==1){
						this.storeList = res.data
						this.selectValue = res.data.is_carry==1?'是':'否'
						this.num = res.data.store_detail.length
						this.logoImg.path = res.data.store_logo
						this.logoImg.id = res.data.store_logo_id
						this.backImg.path = res.data.back_img
						this.backImg.id = res.data.back_img_id
						res.data.cate_lst.map(item=>{
							this.tagList.push({
								cate_name:item.cate_name,
								cate_id:item.id
							})
						})
					}
				})
			},
			
			// 获取类目列表
			getCate(){
				this.$api.getCateList().then(res=>{
					console.log(res,'类目列表')
					if(res.code==1){
						this.cateList = res.data?res.data:[]
					}
				})
			},
			// 选择标签
			upTag(){
				this.tagShow = true
			},
			// 选择标签确定
			selectCate(e){
				console.log(e,'选择的标签')
				let index = e[0]
				let tagIndex = this.tagList.findIndex(item=>item.cate_id==this.cateList[index].cate_id)
				if(tagIndex!=-1){
					uni.showToast({
						title:'标签已存在',
						icon:'none'
					})
					return
				}else{
					this.tagList.push(this.cateList[index])
				}
				
			},
			// 关闭标签
			closeTag(index){
				this.tagList.splice(index,1)
			},
			 
			
			
			
			// 选择年份
			selectYear(type){
				this.type = type
				this.params.year = true
				this.timeShow = true
			},
			
			// 选择开始时间
			selectTime_start(type){
				this.type = type
				this.params.year = false
				this.params.hour = true
				this.params.minute = true
				this.timeShow = true
			},
			// 选择结束时间
			selectTime_end(type){
				this.type = type
				this.params.year = false
				this.params.hour = true
				this.params.minute = true
				this.timeShow = true
			},
			
			// 弹框的确定
			pickDate(e){
				console.log(e,'时间选择')
				if(this.type=='year'){
					this.storeList.open_time = e.year
				}else if(this.type=='start'){
					let start = e.hour+':'+e.minute
					this.storeList.business_start = start
				}else{
					let end = e.hour+':'+e.minute
					this.storeList.business_end = end
				}
			},
			
			
			
			// 选择地址
			selectAddress(){
				uni.navigateTo({
					url:'../home/set/address'
				})
			},
			
			
			handlePicker(e){
				this.selectValue = this.range[e.target.value]
			},
			handleImage(){
				uni.navigateTo({
				    url: '/pagesFour/home/set/qrCode'
				});
			},
			handleTextarea(e){
				// console.log(e,"zishu")
				this.num = e.detail.cursor
			},
			// chooseAvatar() {
			// 	console.log(123)
			// 	// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			// 	uni.navigateTo({
			// 		// 关于此路径，请见下方"注意事项"
			// 		url: '/pagesFour/components/u-avatar-cropper/u-avatar-cropper',
			// 		// 内部已设置以下默认参数值，可不传这些参数
			// 		params: {
			// 			// 输出图片宽度，高等于宽，单位px
			// 			destWidth: 300,
			// 			// 裁剪框宽度，高等于宽，单位px
			// 			rectWidth: 300,
			// 			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
			// 			fileType: 'jpg,png',
			// 		}
			// 	})
			// },
			handleAvatar(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									console.log(data)
									// console.log(this.list)
									if(num==1){ //1头像，2背景
										this.logoImg.path = data.data.url;
										this.logoImg.id = data.data.id;
										this.$forceUpdate()
									}else{
										this.backImg.path = data.data.url;
										this.backImg.id = data.data.id;
										this.$forceUpdate()
									}
									
									console.log(this.logoImg,'上传头像')
									console.log(this.backImg,'上传背景')
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
									setTimeout(function(){
										uni.hideLoading()
									},500)
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
				            }
				        });
				    }
				});
			},
			
			// 完成按钮
			handleAccomplish(){
				let sid = this.$store.state.index.sid
				let cateId = []
				this.tagList.map(item=>{
					cateId.push(item.cate_id)
				})
				this.storeList.cate_lst = cateId.join(',')
				this.storeList.store_id = sid
				
				this.storeList.is_carry = this.selectValue=='是'?1:0
				this.storeList.store_logo = this.logoImg.id
				this.storeList.back_img = this.backImg.id
				this.storeList.province = this.allArea.provinceId
				this.storeList.city = this.allArea.cityId
				this.storeList.area = this.allArea.areaId
				this.storeList.address = this.allArea.address
				console.log(this.storeList,'提交数据')
				this.$api.storeInfo_set(this.storeList).then(res=>{
					console.log(res,'修改结果')
					if(res.code==1){
						uni.showToast({
							title:'修改成功',
							icon:'success'
						})
						uni.$emit('changeInfo',true)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style scope lang="less">
	.container{
		width: 750rpx;
		height: 100%;		
		background-color: #F8F8F8;
		position: relative;
		.title{
			background: url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat;
			// background-size: 100% 538rpx;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 538rpx;
			border-radius: 0 0 2em 2em;
			color: #fff;
			// padding-top: 88rpx;
			.title-text{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 40rpx;
				padding: 16rpx 0 0 28rpx;
				
			}
			.logo{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				position: absolute;
				top: 220rpx;
				left: 0;
				.logo-img{
					width: 160rpx;
					height: 160rpx;
					background: rgba(0, 0, 0, 0);
					border: 6rpx solid #FFFFFF;
					border-radius: 50%;
					margin-bottom: 24rpx;
					margin-top: 76rpx;
				}
			}
		}
		.content{
			// border-radius: 16rpx;
			position: absolute;
			left: 0;
			top: 480rpx;
			padding: 0 24rpx 156rpx 24rpx;
			.detail{
				width: 702rpx;
				border-radius: 16rpx;
				padding: 40rpx 26rpx 40rpx 28rpx;
				background: #fff;
				font-size: 26rpx;
				.name{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 48rpx;
					.name-input{
						display: flex;
						justify-content: center;
						align-items: center;
						
						input{
							text-align: right;
						}
						
						.logo-bg{
							width: 72rpx;
							height: 72rpx;
							margin-right: 20rpx;
						}
					}
					.select_time{
						width: 60%;
						input{
							// width: 100rpx;
							text-align: center;
						}
					}
					.icon-jinru{
						color: #D8D8D8;
						font-size: 26rpx;
					}
				}
				.textarea{
					background: #F8F8F8;
					padding: 24rpx;
				}
			}
		}
	}
</style>
